<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件下载服务</title>
    <!--vue组件的下载-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <!--elementplus组件的下载-->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.full.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.12/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <style>
        .flex-container {
            display: flex;
            /*justify-content: center;*/
            align-items: center;
        }

        .flex-item {
            margin: 10px;
        }

        #svg {
            display: flow;
            margin-left: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-button v-on:click="downloadLog" type="primary">{{ message }}</el-button>
    <el-button @click="" type="primary">自定义下载路径</el-button>
    <el-button type="primary">
        上传<i class="el-icon-upload el-icon--right"></i>
    </el-button>
</div>
<script>
    const App = {
        data() {
            return {
                message: "下载服务LOG日志",
            };
        },
        methods: {
            downloadLog() {
                // 获取当前页面的URL
                let currentUrl = window.location.href;
                // 从URL中提取主机部分
                let host = _.get(new URL(currentUrl), 'host', 'Unknown');
                console.log('页面的host为：' + host);
                axios({
                    methods: 'get',
                    url: host + "/download",
                    params: {
                        id: 2
                    }
                })
            }
        }
    };
    const app = Vue.createApp(App);
    console.log(ElementPlus)
    app.use(ElementPlus);
    // app.component('el-icon-download', download)
    app.mount("#app");
</script>
</body>
</html>